<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/g6demo7">g6demo1</router-link>| -->
      <!-- <router-link to="/g6demo8">g6demo2</router-link>| -->
      <!-- <router-link to="/g6demo9">g6demo2</router-link>|
      <router-link to="/g6demo10">默认层次布局</router-link>|
      <router-link to="/g6demo11">默认环形布局</router-link>|
      <router-link to="/g6HighLight">高亮相邻节点</router-link>|
      <router-link to="/g6demo12">单设备-力导向布局</router-link>|
      <router-link to="/g6demo13">单设备场景</router-link>|
      <router-link to="/g6demo14">单设备场景--树图</router-link>|
      <router-link to="/g6ComboForce">combo 力导布局</router-link>|
      <router-link to="/g6DemoforEdgesEvents">边 事件</router-link>|
      <router-link to="/addEdgeOrNode">add 节点、边</router-link>|-->
      <!-- <router-link to="/changeAnchorPoints">charts节点</router-link>|
      <router-link to="/chartsNodeTemplate">charts节点G2</router-link>|-->
      <!-- <router-link to="/changeNodeAttr">changeNodeAttr</router-link>| -->
      <router-link to="/">canvasHive</router-link>|
      <router-link to="/cssForHive">css实现</router-link>
    </div>
    <router-view id="view_box" />
  </div>
</template>

<style lang="scss">
html,
body {
  height: 100%;
  width: 100%;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  height: 100%;
}
#nav {
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
  margin-top: 10px;
  margin-left: 20px;
  width: 100px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #847070;
}
#view_box {
  flex: 1;
}
// @font-face {
//   font-family: "iconfont";
//   src: url("./assets/icons/iconfont.eot"); /* IE9*/
//   src: url("./assets/icons/iconfont.eot#iefix") format("embedded-opentype"),
//     /* IE6-IE8 */ url("./assets/icons/iconfont.woff") format("woff"),
//     /* chrome, firefox */ url("./assets/icons/iconfont.woff2") format("woff2"),
//     /* chrome, firefox */ url("./assets/icons/iconfont.ttf") format("truetype"),
//     /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
//       url("./assets/icons/iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
// }

// .iconfont {
//   font-family: "iconfont" !important;
//   font-size: 16px;
//   font-style: normal;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
// }
</style>
